$(function(){

    let lis = document.querySelectorAll('.head li')
    // console.log(lis);
    
    let divs = document.querySelectorAll('.hidden>div')
    console.log(divs);
    
    for(let i=0;i<lis.length;i++){

        lis[i].addEventListener('click',function(){
            for(let j=0;j<lis.length;j++){
                lis[j].className=''
            }

            lis[i].className='face'

            for(let j=0;j<lis.length;j++){
                divs[j].classList.remove('show');

            }
            divs[i].classList.add('show');
        })
    }
    //jquery validate插件
    $('#rule').validate({
        //规则  需要使用name的值来判定
        rules:{
            distext:{
                required:true,
                isUser:true

            },
            pastext:{
                required:true,
                isPwd:true
            }   
        },
        //提示文字
        messages:{
            distext:{
                required:'请输入用户名'
            },
            pastext:{
                required:'请输入密码'
            }
        
        }
    });
    jQuery.validator.addMethod("isUser", function(value, element) {   
        var tel = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
        return this.optional(element) || (tel.test(value));
    }, "字母开头，允许5-16字节，允许字母数字下划线");

    //密码
    jQuery.validator.addMethod("isPwd", function(value, element) {   
        var tel = /^[a-zA-Z]\w{5,17}$/;
        return this.optional(element) || (tel.test(value));
    }, "以字母开头，长度在6~18之间，只能包含字母、数字和下划线");
})